<template>
<div id="setting">
  <div class="group-name">1、推荐配置</div>
  <el-row>
    <el-form label-width="200" ref="settingForm" inline :rules="rules" :model="settingForm">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="推荐数量：" prop="recommend_result_num">
            <el-input-number  size="medium" v-model="settingForm.recommend_result_num" :min="1" :max="100" label=""></el-input-number>
            <el-tooltip content="每次推荐的结果最大数量" effect="dark" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最新新闻推荐-推荐周期(小时)：" prop="latest_recommend_delay">
            <el-input-number size="medium"  v-model="settingForm.latest_recommend_delay" :min="1" :max="10000" label=""></el-input-number>
            <el-tooltip content="推荐最新资讯信息；被推荐的资讯发布时间大于等于current-delay，并按照时间由近到远排序" effect="dark" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="近期热点推荐-推荐周期(小时)：" prop="hotspot_recent_recommend_delay">
            <el-input-number size="medium" v-model="settingForm.hotspot_recent_recommend_delay" :min="1" :max="10000" label=""></el-input-number>
            <el-tooltip content="推荐近期热点资讯信息，被统计的点击数据时间大于等于current-delay，被推荐的资讯按照点击由高到底排序" effect="dark" placement="top">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中期热点推荐-推荐周期(小时)：" prop="hotspot_middle_recommend_delay">
            <el-input-number size="medium" v-model="settingForm.hotspot_middle_recommend_delay" :min="1" :max="10000" label=""></el-input-number>
            <el-tooltip content="推荐中期热点资讯信息，被统计的点击数据时间大于等于current-delay，被推荐的资讯按照点击由高到底排序" effect="dark" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="长期热点推荐-推荐周期(小时)：" prop="hotspot_long_recommend_delay">
            <el-input-number size="medium" v-model="settingForm.hotspot_long_recommend_delay" :min="1" :max="10000" label=""></el-input-number>
            <el-tooltip content="推荐长期热点资讯信息，被统计的点击数据时间大于等于current-delay，被推荐的资讯按照点击由高到底排序" effect="dark" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户标签推荐-推荐周期(小时)：" prop="stock_recommend_delay">
            <el-input-number size="medium" v-model="settingForm.stock_recommend_delay" :min="1" :max="10000" label=""></el-input-number>
            <el-tooltip content="基于用户画像的自选标签、持仓标签、用户兴趣标签推荐相关标签的资讯；被推荐的资讯发布时间大于等于current-delay，并按照标签匹配对应的tf-idf排序" effect="dark" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="相似内容推荐-推荐周期(小时)：" prop="cb_recommend_delay">
            <el-input-number size="medium" v-model="settingForm.cb_recommend_delay" :min="1" :max="10000" label=""></el-input-number>
            <el-tooltip content="基于用户最近点击的资讯，推荐与其相似的资讯；被推荐的资讯发布时间大于等于current-delay" effect="dark" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户标签推荐-策略权重：" prop="stock_recommend_weight">
            <el-input  size="small" type="number" v-model="settingForm.stock_recommend_weight" placeholder="请输入数字"></el-input>
            <el-tooltip content="基于用户画像的自选标签、持仓标签、用户兴趣标签推荐相关标签的资讯；本配置为对应的权重参数，最终排序参考得分为：weight/(position+1)，权重0表示停止使用" effect="dark" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户协同过滤-策略权重：" prop="user_cf_recommend_weight">
            <el-input size="small" type="number" v-model="settingForm.user_cf_recommend_weight" placeholder="请输入数字"></el-input>
            <el-tooltip content="基于用户画像的协同过滤，推荐相似用户的最近历史点击资讯；本配置为对应的权重参数，最终排序参考得分为：weight/(position+1)，权重0表示停止使用" effect="dark" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="相似内容推荐-策略权重：" prop="cb_recommend_weight">
            <el-input size="small" type="number" v-model="settingForm.cb_recommend_weight" placeholder="请输入数字"></el-input>
            <el-tooltip content="基于用户最近点击的资讯，推荐与其相似的资讯；配置为对应的权重参数，最终排序参考得分为：weight/(position+1)，权重0表示停止使用" effect="dark" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="最新资讯推荐-策略权重：" prop="latest_recommend_weight">
            <el-input size="small" type="number" v-model="settingForm.latest_recommend_weight" placeholder="请输入数字"></el-input>
            <el-tooltip content="推荐最新资讯信息，配置为对应的权重参数，最终排序参考得分为：weight/(position+1)，权重0表示停止使用" effect="dark" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="近期热点推荐-策略权重：" prop="hotspot_recent_recommend_weight">
            <el-input size="small" type="number" v-model="settingForm.hotspot_recent_recommend_weight" placeholder="请输入数字"></el-input>
            <el-tooltip content="推荐近期热点资讯信息，配置为对应的权重参数，最终排序参考得分为：weight/(position+1)，权重0表示停止使用" effect="dark" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="中期热点推荐-策略权重：" prop="hotspot_middle_recommend_weight">
            <el-input size="small" type="number" v-model="settingForm.hotspot_middle_recommend_weight" placeholder="请输入数字"></el-input>
            <el-tooltip content="推荐中期热点资讯信息，配置为对应的权重参数，最终排序参考得分为：weight/(position+1)，权重0表示停止使用" effect="dark" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="长期热点推荐-策略权重：" prop="hotspot_long_recommend_weight">
            <el-input size="small" type="number" v-model="settingForm.hotspot_long_recommend_weight" placeholder="请输入数字"></el-input>
            <el-tooltip content="推荐长期热点资讯信息，配置为对应的权重参数，最终排序参考得分为：weight/(position+1)，权重0表示停止使用" effect="dark" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-row>
  <div class="group-name">2、分流推荐配置</div>
  <el-row>
    <el-table :data="splitFlowServerList"
              border
              style="width: 100%">
      <el-table-column prop="serivceurl" label="服务地址(abtest 分流对应服务)">
        <template slot-scope="scope">
          <el-input placeholder="请输入服务器地址" v-model="scope.row.serviceurl"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="isValid" label="有效性">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isValid" active-color="#13ce65" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="权重(weight-i/sum(weight))">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.weight"  label=""></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="版本">
        <template slot-scope="scope">
          <el-input  v-model="scope.row.version"  ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="versionDesc" label="版本说明">
        <template slot-scope="scope">
          <el-input v-model="scope.row.versionDesc"  ></el-input>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
  <el-row :gutter="20" style="display: flex;justify-content: center;margin-top: 20px">
    <el-col :span="8" style="text-align: center"> <el-button type="primary "  size="medium " @click="removeRow">-</el-button> <el-button type="primary " size="medium " @click="addRow">+</el-button></el-col>
  </el-row>

  <div class="submit">
    <el-button type="primary" @click="saveFormData"> 保存配置</el-button>
  </div>
</div>
</template>

<script>
import { getRecommandSetting, saveRecommandSetting, saveSplitflowSetting } from '../../api/recomandAdvice'

export default {
  name: 'intelligedSetting',
  data() {
    const valiNumberPass = (rule, value, callback) => { // 包含小数的数字
      const reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g
      if (value === '') {
        callback(new Error('请输入内容'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入数字'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        recommend_result_num: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        latest_recommend_delay: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        hotspot_recent_recommend_delay: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        hotspot_middle_recommend_delay: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        hotspot_long_recommend_delay: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        stock_recommend_delay: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        cb_recommend_delay: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        stock_recommend_weight: [
          { required: true, message: '请输入', trigger: 'blur' },
          { required: true, validator: valiNumberPass, trigger: 'blur' }
        ],
        user_cf_recommend_weight: [
          { required: true, message: '请输入', trigger: 'blur' },
          { required: true, validator: valiNumberPass, trigger: 'blur' }
        ],
        cb_recommend_weight: [
          { required: true, message: '请输入', trigger: 'blur' },
          { required: true, validator: valiNumberPass, trigger: 'blur' }
        ],
        latest_recommend_weight: [
          { required: true, message: '请输入', trigger: 'blur' },
          { required: true, validator: valiNumberPass, trigger: 'blur' }
        ],
        hotspot_recent_recommend_weight: [
          { required: true, message: '请输入', trigger: 'blur' },
          { required: true, validator: valiNumberPass, trigger: 'blur' }
        ],
        hotspot_middle_recommend_weight: [
          { required: true, message: '请输入', trigger: 'blur' },
          { required: true, validator: valiNumberPass, trigger: 'blur' }
        ],
        hotspot_long_recommend_weight: [
          { required: true, message: '请输入', trigger: 'blur' },
          { required: true, validator: valiNumberPass, trigger: 'blur' }
        ]
      },
      settingForm: {
        id: '',
        recommend_result_num: 0,
        latest_recommend_delay: 0,
        hotspot_recent_recommend_delay: 0,
        hotspot_middle_recommend_delay: 0,
        hotspot_long_recommend_delay: 0,
        stock_recommend_delay: 0,
        cb_recommend_delay: 0,
        stock_recommend_weight: 0,
        user_cf_recommend_weight: 0,
        cb_recommend_weight: 0,
        latest_recommend_weight: 0,
        hotspot_recent_recommend_weight: 0,
        hotspot_middle_recommend_weight: 0,
        hotspot_long_recommend_weight: 0
      },
      settingForm_: {},
      splitFlowServerList: []
    }
  },
  methods: {
    removeRow() {
      const list = [...this.splitFlowServerList]
      if (list.length === 1) return
      list.shift()
      this.splitFlowServerList = [...list]
    },
    addRow() {
      const list = [...this.splitFlowServerList]
      list.unshift({
        serviceurl: '',
        isValid: true,
        weight: 5,
        version:'',
        versionDesc:''
      })
      this.splitFlowServerList = [...list]
    },
    saveSettingData() {
      const params = {
        id: this.settingForm.id,
        recommendResultNum: this.settingForm.recommend_result_num,
        latestRecommendDelay: this.settingForm.latest_recommend_delay,
        hotspotRecentRecommendDelay: this.settingForm.hotspot_recent_recommend_delay,
        hotspotMiddleRecommendDelay: this.settingForm.hotspot_middle_recommend_delay,
        hotspotLongRecommendDelay: this.settingForm.hotspot_long_recommend_delay,
        stockRecommendDelay: this.settingForm.stock_recommend_delay,
        cbRecommendDelay: this.settingForm.cb_recommend_delay,
        stockRecommendWeight: this.settingForm.stock_recommend_weight,
        userCfRecommendWeight: this.settingForm.user_cf_recommend_weight,
        cbRecommendWeight: this.settingForm.cb_recommend_weight,
        latestRecommendWeight: this.settingForm.latest_recommend_weight,
        hotspotRecentRecommendWeight: this.settingForm.hotspot_recent_recommend_weight,
        hotspotMiddleRecommendWeight: this.settingForm.hotspot_middle_recommend_weight,
        hotspotLongRecommendWeight: this.settingForm.hotspot_long_recommend_weight
      }
      return new Promise((resolve, reject) => {
        saveRecommandSetting(params).then(res => {
          let flag = res.Data
          if (flag.length === 0) {
            flag = false
          } else {
            flag = true
          }
          resolve(flag)
        }).catch(err => {
          console.log(err)
          reject(err)
        })
      })
    },
    saveAdviceData() {
      let list = [...this.splitFlowServerList]
      list = list.map(val => {
        val.isValid = val.isValid ? 1 : 0
        return val
      })
      const paramsList = { abConfList: [...list] }

      return new Promise((resolve, reject) => {
        saveSplitflowSetting(paramsList).then(res => {
          let flag = res.Data
          if (flag.length === 0) {
            flag = false
          } else {
            flag = true
          }

          list = list.map(val => {
            val.isValid = val.isValid === 1
            return val
          })

          this.splitFlowServerList = [...list]
          resolve(flag)
        }).catch(err => {
          console.log(err)
          reject(err)
        })
      })
    },
    saveFormData() {
      this.$refs['settingForm'].validate(async(valid) => {
        if (valid) {
          const flag1 = await this.saveSettingData()
          const flag2 = await this.saveAdviceData()
          if (!flag1 || !flag2) {
            this.$message.error('您保存的数据有误!')
          } else {
            this.$message.success('保存成功!')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    initSetting() {
      getRecommandSetting().then(res => {
        const data = Array.isArray(res.Data) ? res.Data : []
        if (data.length === 0) {
          this.settingForm = { ...this.settingForm_ }
          this.splitFlowServerList = []
        } else {
          this.settingForm = {
            id: data[0].recommendConf.id,
            recommend_result_num: data[0].recommendConf.recommendResultNum,
            latest_recommend_delay: data[0].recommendConf.latestRecommendDelay,
            hotspot_recent_recommend_delay: data[0].recommendConf.hotspotRecentRecommendDelay,
            hotspot_middle_recommend_delay: data[0].recommendConf.hotspotMiddleRecommendDelay,
            hotspot_long_recommend_delay: data[0].recommendConf.hotspotLongRecommendDelay,
            stock_recommend_delay: data[0].recommendConf.stockRecommendDelay,
            cb_recommend_delay: data[0].recommendConf.cbRecommendDelay,
            stock_recommend_weight: data[0].recommendConf.stockRecommendWeight,
            user_cf_recommend_weight: data[0].recommendConf.userCfRecommendWeight,
            cb_recommend_weight: data[0].recommendConf.cbRecommendWeight,
            latest_recommend_weight: data[0].recommendConf.latestRecommendWeight,
            hotspot_recent_recommend_weight: data[0].recommendConf.hotspotRecentRecommendWeight,
            hotspot_middle_recommend_weight: data[0].recommendConf.hotspotMiddleRecommendWeight,
            hotspot_long_recommend_weight: data[0].recommendConf.hotspotLongRecommendWeight
          }

          let list = data[0].abConfList
          list = list.map(val => {
            val.isValid = val.isValid === 1
            return val
          })

          this.splitFlowServerList = list
          this.settingForm_ = { ...this.settingForm }
        }
        console.log(res)
      })
    }
  },
  created() {
    this.initSetting()
  }
}
</script>

<style  lang="scss">
#setting{
  padding: 40px;
  .group-name{
    font-size: 20px;
    font-weight: 600;
    line-height: 40px;
    height: 40px;
    margin-bottom: 20px;
  }

  .submit{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 30px;
  }

  .el-input{
    width: calc(100% - 25px);
  }
}
</style>
